<template>
  <div class="demo">
    <div class="demo-title">后缀</div>
    <div class="demo-content">
      <Slider v-model:value="rows" :min="1" :max="10" />
      <Typography.Paragraph
        :ellipsis="ellipsis"
        :title="`${article}--SSC+ Design`"
        :content="article"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import Slider from '@sscd/slider';
  import Typography from '@sscd/typography';
  const rows = ref(1);
  const ellipsis = computed(() => {
    return {
      rows: rows.value,
      expandable: true,
      suffix: '--SSC+ Design',
      onEllipsis: (val: boolean) => {
        console.log('Ellipsis changed:', val);
      },
    };
  });
  const article =
    'SSC+Design is a design system developed by SSC for products and digital experiences. The system is based on SSC+Design language and consists of working code, design tools and resources, and human-machine interface guidelines. SSC+Design is a design system developed by SSC for products and digital experiences. The system is based on SSC+Design language and consists of working code, design tools and resources, and human-machine interface guidelines. SSC+Design is a design system developed by SSC for products and digital experiences. The system is based on SSC+Design language and consists of working code, design tools and resources, and human-machine interface guidelines.';
</script>
